<template>
  <div class="tabless-main">
    <!-- 个人主页 -->
    <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col style="width: 30%;">
          <el-card shadow="never">
            <div class="head">
              <div style="width: 100%; text-align: center;">
                <el-image class="head-img" :src="userItem.icon" />
              </div>
              <div class="username" style="width: 100%; text-align: center;">{{ userItem.username }}</div>
              <div class="head-msg">
                <div>交互专家</div>
                <div>不凡学院－某某某事业群－某某平台部－某某技术部－UED</div>
                <div>河南省 郑州市 金水区 绿地新都会</div>
              </div>

              <div class="tag">
                <div style="font-size: 13px; margin: 10px 0;">标签</div>
                <el-tag
                  v-for="tag in tags"
                  :key="tag.name"
                  style="margin-right: 10px;"
                  closable
                  size="mini"
                >
                  {{ tag.name }}
                </el-tag>
                <el-button v-if="isAddShow" style="margin-left: 10px;" type="text" size="mini" @click="getAddTage">+</el-button>
                <el-input v-else v-model="newTags" style="width: 100px;" size="mini" clearable @blur="getAddTage1" />

              </div>

              <div class="nav">
                <div class="nav-list">不凡UI设计组</div>
                <div class="nav-list">不凡前端开发组</div>
                <div class="nav-list">阿里支付组</div>
                <div class="nav-list">vue小组</div>
                <div class="nav-list">全员都是吴彦祖</div>
                <div class="nav-list">高逼格天团</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col style="width: 70%;">
          <el-card
            shadow="never"
            :body-style="{ padding: '20px' }"
          >
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item class="menuList" index="1">文章</el-menu-item>
              <el-menu-item class="menuList" index="2">项目</el-menu-item>
            </el-menu>

          </el-card>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
// import { getInitMenus } from '@/api/userMem'
import { getUserInfo } from '@/utils/myAuth'

export default {
  name: 'Tabless',

  data() {
    return {
      userItem: [],
      tags: [
        { name: '不凡人' },
        { name: '学霸' },
        { name: '学业设计' },
        { name: '高颜值' },
        { name: '随便' },
        { name: '无所谓' }
      ],
      newTags: '',
      isAddShow: true,
      activeIndex: '1',
      activeIndex2: '1'
    }
  },

  created() {
    // this.doGetInitMenus()
    if (getUserInfo()) {
      this.userItem = getUserInfo()
      console.log(this.userItem)
    }
  },

  methods: {

    getAddTage() {
      this.isAddShow = false
    },
    getAddTage1(e) {
      this.isAddShow = true
      this.tags.push({
        name: this.newTags
      })
      this.newTags = ''
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }

  }
}
</script>

<style lang="scss" scoped>
.tabless-main{
  .head{
    // display: flex;
    // justify-content: center;
    // flex-wrap: wrap;
    .head-img{
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .username{
      font-size: 14px;
      margin-top: 10px;
      font-weight: 600;
    }
    .head-msg{
      width: 100%;
      margin-top: 15px;
      font-size: 13px;
      line-height: 1.5em;
      padding-bottom: 15px;
      border-bottom: 1px dotted #c9c9c9;
    }
    .tag{
      margin-top: 25px;
      padding-bottom: 25px;
      border-bottom: 1px dotted #c9c9c9;
    }
    .nav{
      width: 100%;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      .nav-list{
        width: 50%;
        line-height: 35px;
        font-size: 14px;
        color: #545454;
      }
    }
  }
  .menuList{
    font-size: 13px;
    padding: 0 10px;
  }
}
</style>
